<template>
  <div>
    <h2 class="title">偏科统计</h2>
    <chart :options="options" :height="250" />
  </div>
</template>

<script>
// import * as echarts from 'echarts'

function getChartOptions (scaleData) {
  var placeHolderStyle = {
    normal: {
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      color: 'rgba(0, 0, 0, 0)',
      borderColor: 'rgba(0, 0, 0, 0)',
      borderWidth: 0
    }
  }
  var seriesObj = []
  var color = ['#FF647C', '#FFBE75', '#3EE2A5', '#6C77FD', '#4dcef5', '#f54dbe', '#a74df5', '#f54dbe']
  for (var i = 0; i < scaleData.length; i++) {
    console.log(scaleData[i].name)
    seriesObj.push(
      {
        name: '',
        type: 'pie',
        radius: scaleData[i].radius1,
        hoverAnimation: false,
        itemStyle: {
          normal: {
            label: {
              show: false,
              color: '#ddd'
            }
          }
        },
        data: [
          {
            value: scaleData[i].value,
            name: scaleData[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                borderColor: color[i]
              }
            }
          },
          {
            value: 30,
            name: '',
            itemStyle: placeHolderStyle
          }
        ]
      }
    )
  }
  return {
    grid: {
      top: '10%',
      bottom: '10%',
      left: 0,
      right: 0
    },
    color: color,
    tooltip: {
      show: false
    },
    legend: {
      bottom: 0,
      itemGap: 20,
      itemWidth: 15,
      itemHeight: 10,
      data: scaleData.map(item => {
        return {
          name: item.name,
          icon: 'circle',
          textStyle: {
            color: '#fff'
          }
        }
      })
    },
    toolbox: {
      show: false
    },
    series: seriesObj
  }
}
export default {
  name: 'pie-chart',
  props: ['student'],
  data () {
    return {
      options: {}
    }
  },
  mounted () {
    setTimeout(() => {
      this.initData()
    }, 500)
  },
  methods: {
    initData () {
      const data = this.$db.select('achievement')
      data.onsuccess = (res) => {
        let index = 0
        const scoreData = res.target.result.reduce((prev, item) => {
          if (item.student === this.student) {
            for (const key in item.score) {
              prev[key] = (prev[key] || 0) * 1 + item.score[key] * 1
            }
            index++
          }
          return prev
        }, {})
        const data = []
        let i = 0
        for (const key in scoreData) {
          data.push({
            name: key,
            value: scoreData[key] / index,
            radius1: [20 + 15 * i, 25 + 15 * i],
            radius2: (5 + 5 * i) + '%'
          })
          i++
        }
        console.log(data, '13123')
        this.options = getChartOptions(data)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 50px;
  text-align: center;
}
</style>
